<template>
    <div class="myFollow-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>我的消息</BreadcrumbItem>
        </Breadcrumb>
        <!-- 如果数据为空时两个tab栏分别显示 -->
        <!-- <a-empty style="padding-top:70px;"></a-empty> -->
        <!-- 如果数据不为空时显示 -->
        <div class="myFollow-info">
            <Tabs value="name1">
                <!-- 私信列表 -->
                <TabPane label="私信" name="name1">
                    <!-- 消息为空时显示 -->
                    <div class="hasMsg" v-if="msgList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <!-- 消息不为空时显示 -->
                    <div class="hasMsg" v-else>
                        <div class="top-info">
                            <span>未读消息：{{msgNotCount}}</span>
                        </div>
                        <div class="private" v-for="(item,i) in msgList" :key="i">
                            <!-- 显示接收者（避免消息列表是自己） -->
                            <div class="private-item" v-if="item.pmFriend==item.pmReceiver">
                                <div class="private-left">
                                    <router-link :to="'/userInfo/' + item.pmFriend"><img :src="item.receiverAvatar" alt=""></router-link>
                                    <div class="private-info">
                                        <router-link :to="'/userInfo/' + item.pmFriend" class="goods-title">{{item.receiverName}}
                                        <Badge :count="item.msgCount"></Badge></router-link>
                                        <p class="msg-content">{{item.pmContent}}</p>
                                    </div>
                                </div>
                                <div class="private-right">
                                    <span class="time">{{item.pmTime | dataFormat}}</span>
                                    <span>
                                        <router-link :to="'/addPrivateMsg/' + item.pmFriend">回复</router-link><span class="line-span"></span>
                                        <a-popconfirm
                                            title="确认删除？"
                                            @confirm="confirm(item.pmFriend)"
                                            okText="Yes"
                                            cancelText="No">
                                            <a href="javascript:void(0)"><Icon type="md-trash" /></a>
                                        </a-popconfirm>
                                    </span>
                                </div>
                            </div>
                            <!-- 显示发送者 -->
                            <div class="private-item" v-else>
                                <div class="private-left">
                                    <router-link :to="'/userInfo/' + item.pmFriend"><img :src="item.senderAvatar" alt=""></router-link>
                                    <div class="private-info">
                                        <router-link :to="'/userInfo/' + item.pmFriend" class="goods-title">{{item.senderName}}
                                        <Badge :count="item.msgCount"></Badge></router-link>
                                        <p class="msg-content">{{item.pmContent}}</p>
                                    </div>
                                </div>
                                <div class="private-right">
                                    <span class="time">{{item.pmTime | dataFormat}}</span>
                                    <span>
                                        <router-link :to="'/addPrivateMsg/' + item.pmFriend">回复</router-link><span class="line-span"></span>
                                        <a-popconfirm
                                            title="确认删除？"
                                            @confirm="confirm(item.pmFriend)"
                                            okText="Yes"
                                            cancelText="No">
                                            <a href="javascript:void(0)"><Icon type="md-trash" /></a>
                                        </a-popconfirm>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </TabPane>
                <!-- 留言列表 -->
                <TabPane label="留言" name="name2">
                    <div class="top2-info">
                        <div>
                            <router-link to="/">清空所有消息</router-link>
                        </div>
                    </div>
                    <div class="myinfo-item">
                        <div class="msg-info">
                            <span class="msg-unread"></span>
                            <span class="msg-type">宝贝</span>
                            <span class="msg-title"><router-link to="/">用户昵称</router-link></span>
                        </div>
                        <div class="comment-content">
                            <div class="comment-left">
                                <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                <div class="comment-title">
                                    <p><router-link to="/">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</router-link></p>
                                    <p>留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容</p>
                                </div>
                            </div>
                            <div class="comment-right">
                                <router-link to="/"><Icon type="md-trash" /></router-link>
                                <span>3天前</span>
                            </div>
                        </div>
                    </div>
                    <div class="myinfo-item">
                        <div class="msg-info">
                            <span class="msg-unread"></span>
                            <span class="msg-type">求购</span>
                            <span class="msg-title"><router-link to="/">用户昵称</router-link></span>
                        </div>
                        <div class="comment-content">
                            <div class="comment-left">
                                <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                <div class="comment-title">
                                    <p><router-link to="/">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</router-link></p>
                                    <p>留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容</p>
                                </div>
                            </div>
                            <div class="comment-right">
                                <router-link to="/"><Icon type="md-trash" /></router-link>
                                <span>3天前</span>
                            </div>
                        </div>
                    </div>
                </TabPane>
                <!-- 系统通知列表 -->
                <TabPane label="系统通知" name="name3">
                    <!-- 系统通知为空时显示 -->
                    <div class="hasNotice" v-if="noticeList==''&&notNoticeList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <!-- 系统通知不为空时显示 -->
                    <div class="hasNotice" v-else>
                        <div class="top-info">
                            <span>未读消息：{{noticeNotCount}}</span>
                            <div>
                                <a href="javascript:void(0);" @click="updateAllRead">全部标记为已读</a>
                                <span class="line"></span>
                                <a-popconfirm
                                    title="确认清空？"
                                    @confirm="deleteAll"
                                    okText="Yes"
                                    cancelText="No">
                                    <a href="javascript:void(0)">清空所有消息</a>
                                </a-popconfirm>
                            </div>
                        </div>
                        <!-- 未读通知列表 -->
                        <div class="myinfo-item" v-for="item in notNoticeList" :key="item.nId">
                            <div class="msg-info">
                                <span class="msg-unread"></span>
                                <span class="msg-type">系统</span>
                                <span class="msg-title" @click="updateRead(item.nuId, item.nuNId, item.nuUid)">{{item.notice.nTitle}}</span>
                                <span class="msg-option">
                                    <span class="date">{{item.notice.nPubTime | dataFormat}}</span>
                                    <a href="javascript:void(0);" @click="deleteById(item.nuId)" class="delete"><Icon type="md-trash" /></a>
                                </span>
                            </div>
                            <div class="drop-content">
                                <span>{{item.notice.nContent}}</span>
                            </div>
                        </div>
                        <!-- 已读通知列表 -->
                        <div class="myinfo-item" v-for="(item,i) in noticeList" :key="i">
                            <div class="msg-info">
                                <span class="msg-type">系统</span>
                                <span class="msg-title">{{item.notice.nTitle}}</span>
                                <span class="msg-option">
                                    <span class="date">{{item.notice.nPubTime | dataFormat}}</span>
                                    <a href="javascript:void(0);" @click="deleteById(item.nuId)" class="delete"><Icon type="md-trash" /></a>
                                </span>
                            </div>
                            <div class="drop-content">
                                <span>{{item.notice.nContent}}</span>
                            </div>
                        </div>
                        <div class="page-all">
                            <Page :total="allPages.total" :page-size="pageSize" :current="pageNum" @on-change="changePage"  />
                        </div>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
export default {
    name: 'myInfo',
    data() {
        return {
            id: JSON.parse(localStorage.getItem('user')).uId,
            msgList: [], // 私信列表
            msgNotCount: 0, // 未读私信数
            noticeList: [], // 系统通知已读列表
            pageSize: 4, // 每页显示多少条
            allPages: [], // 存放分页1的信息
            pageNum: 1, // 默认展示第一页数据
            notNoticeList: [], // 系统通知未读列表
            noticeNotCount: 0, // 未读系统通知数
        }
    },
    created() {
        this.findAllByUser()
        this.findReadByUid()
        this.findNotReadByUid()
    },
    methods: {
        // 根据用户的发送者id(pmUser)查看该用户与其他用户的私信列表
        findAllByUser() {
            this.$axios({
                url: 'privateMsg/findAllByUser',
                method: 'get',
                params: {
                    pmUser: this.id,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.msgList = res.data.list
                    this.msgList.forEach(item => {
                        this.msgNotCount += item.msgCount
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 提示框确认-删除私信列表页面两指定用户间的整个会话
        confirm(id) {
            this.$axios({
                url: 'privateMsg/deleteAll/',
                method: 'get',
                params: {
                    pmUser: this.id,
                    pmFriend: id,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findAllByUser()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据用户id查看该用户收到的已读系统通知列表
        findReadByUid() {
            this.$axios({
                url: 'notice/findReadByUid',
                method: 'get',
                params: {
                    uId: this.id,
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.noticeList = res.data.pageInfo.list
                    this.allPages = res.data.pageInfo
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 分页改变页码
        changePage(index) {
            // 加载更多，页码改变的回调，返回改变后的页码
            this.pageNum = index
            this.findReadByUid()
        },
        // 根据用户id查看该用户收到的未读系统通知列表
        findNotReadByUid() {
            this.$axios({
                url: 'notice/findNotReadByUid',
                method: 'get',
                params: {
                    uId: this.id,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.notNoticeList = res.data.list
                    this.noticeNotCount = this.notNoticeList.length
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 用户修改某条系统通知阅读状态为已读
        updateRead(nuId, nuNId, nuUid) {
            this.$axios({
                url: 'notice/updateRead',
                method: 'get',
                params: {
                    nuId,
                    nuNId,
                    nuUid,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findReadByUid()
                    this.findNotReadByUid()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 用户根据通知用户id删除此条通知
        deleteById(id) {
            this.$axios({
                url: 'notice/deleteById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findReadByUid()
                    this.findNotReadByUid()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 将登录用户下的未读通知全部标记为已读
        updateAllRead() {
            this.$axios({
                url: 'notice/updateAllRead',
                method: 'get',
                params: {
                    nuUid: this.id,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findReadByUid()
                    this.findNotReadByUid()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 将登录用户下的所有系统通知消息清空
        deleteAll() {
            this.$axios({
                url: 'notice/deleteAll/',
                method: 'get',
                params: {
                    uId: this.id,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.findReadByUid()
                    this.findNotReadByUid()
                }
            }).catch(error => {
                console.log(error)
            })
        },
    },
}
</script>

<style scoped>
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.myFollow-container {
    min-height: 480px;
}
.myFollow-info {
    margin-top: 50px;
}
.top-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.line {
    display: inline-block;
    height: 12px;
    margin: 2px 12px;
    border-right: 1px solid #979797;
}
.msg-info {
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.msg-unread {
    width: 6px;
    height: 6px;
    display: inline-block;
    background: #ca0c16;
    border-radius: 50%;
    margin-right: 5px;
}
.msg-type {
    display: inline-block;
    width: 36px;
    height: 20px;
    color: #4d4d4d;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    vertical-align: top;
    margin-right: 5px;
}
.msg-title {
    width:75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #4d4d4d;
    display: inline-block;
    font-size: 14px;
}
.msg-option {
    width:20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.date {
    color:#6b6b6b;
    font-size: 12px;
}
.delete {
    color: #4d4d4d;
}
.drop-content {
    padding: 10px;
    background-color: #f7f7f7;
    font-size: 14px;
    color: #4d4d4d;
    margin:10px 0;
}
.top2-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}
.comment-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    margin-bottom: 10px;
}
.comment-left {
    width: 79%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.comment-left img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}
.comment-title {
    width: calc(100% - 50px);
}
.comment-title p {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
.comment-right {
    width: 12%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.comment-right a {
    color: #4d4d4d;
}
.private-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.private-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width:73%;
}
.private-left img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 10px;
}
.private-info p {
    margin-bottom: 0;
    font-size: 12px;
}
.private-info {
    max-width:95%;
}
.private-info>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
.msg-content {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.private-right>span {
    display: block;
    color: #515a6e;
    font-size: 12px;
    text-align: center;
}
.line-span {
    display: inline-block;
    height: 8px;
    margin: 2px 12px;
    border-right: 1px solid #979797;
}
</style>